<template>
    <div class="home">
        <PageHeader></PageHeader>
        <div class="homeContent">
            <div style=" width: 300px;" class="homeTabs">
                <ul>
                    <li>{{ title }}</li>
                </ul>
            </div>
            <div class="homeBrief">
                <ul>
                    <li v-for="(item, i) in list" :key="i">
                        <p :title="item.title" @click="detail(item)">{{ item.title }}</p>
                        <span style="font-size: 12px;">{{ item.createTime ? item.createTime.substring(0, 10) : ""
                            }}</span>
                    </li>
                </ul>
                <PageInation :total="total" v-model:pageSize="queryParams.pageSize" v-model:page="queryParams.pageNum"
                    @pagination="getList()">
                </PageInation>
            </div>
        </div>
    </div>
</template>

<script setup name='ShowPhotos'>
import { GetArticlecategory, GetArticleList } from '@/api/common'
import PageHeader from '../components/PageHeader.vue'
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import PageInation from '../components/PageInation.vue'
const router = useRouter()
const route = useRoute()
const title = ref('')
const list = ref([])
const total = ref(0)
const loading = ref(true)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    sort: 'createTime',
    sortType: 'descending',
})
const detail = (val) => {
    if (val.authorName == '外部链接') {
        const regex = /<a[^>]*\shref="([^"]+)"[^>]*>([^<]+)<\/a>/gi;
        const doc = regex.exec(val.content)
        if (doc) {
            window.open(doc[1], '_blank')
        } else {
            const href = router.resolve({ path: "/NULL" })
            window.open(href.href, '_blank')
        }
    } else {
        const routerData = router.resolve({ path: "/DetialInformation", query: { id: val.cid } })
        window.open(routerData.href, '_blank')
    }
}
const getList = () => {
    loading.value = true
    GetArticleList(queryParams.value).then((res) => {
        list.value = res.data.data.result
        total.value = res.data.data.totalNum
        loading.value = false
    })
}
const getID = () => {
    loading.value = true
    GetArticlecategory({ name: title.value }).then((res) => {
        queryParams.value.categoryId = res.data.data.result[0].categoryId
        getList()
    })
}
onMounted(() => {
    if (route.query.tabId == 1) {
        title.value = '视频展示'
    } else if (route.query.tabId == 2) {
        title.value = '捐赠项目'
    } else {
        title.value = '图片展示'
    }
    getID()
})
</script>

<style lang="scss" scoped>
.home {
    margin: 0 auto;
    width: 85%;
    min-height: calc(100vh - 521px);

    .homeContent {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .homeTabs {
            ul {
                list-style: none;
                margin: 0;
                padding: 0;

                li {
                    height: 60px;
                    line-height: 60px;
                    text-align: center;
                    cursor: pointer;
                    font-size: 16px;
                    background-image: url(../assets/tab.jpg);
                    background-repeat: no-repeat;
                    color: #fff;
                    font-weight: bolder;
                    background-size: 100% 60px;
                }
            }
        }

        .homeBrief {
            flex: 1;
            overflow: hidden;

            ul {
                margin: 5px 15px 10px 30px;

                li {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    p {
                        font-size: 16px;
                        text-align: left;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-width: 80%;
                        margin: 15px 0;
                        cursor: pointer;
                        border-bottom: 1px solid #fff;
                    }

                    span {
                        width: 80px;
                        text-align: right;
                    }

                    p:hover {
                        color: red;
                        border-color: red;
                    }
                }
            }

            ul li p::before {
                content: "";
                position: absolute;
                border-radius: 50%;
                margin-top: 0.5rem;
                margin-left: -1rem;
                width: 0.4rem;
                height: 0.4rem;
                background: #000;
            }

            p:hover::before {
                background: red;
            }
        }
    }
}
</style>